<template>
  <div style="background: white; border-radius: 5px;">
    <div>
      <Row>
        <Col span="19">
          <Row>
            <Col span="9">
              <div class="class1" v-if="albumData.type === 0">许可</div>
              <div class="class1" v-else-if="albumData.type === 1">转让</div>
              <div class="class1" v-else-if="albumData.type === 2">分发</div>
              <div class="class1" v-else>许可、转让</div>
            </Col>
          </Row>
        </Col>
        <Col span="5" style="margin-left: -10px">
          <Row style="width: 100px;display: flex; align-items: center; line-height: 50px; height: 50px">
            <Col span="10" style="display: flex; align-items: center">
              <Icon type="md-cart" color="rgba(235, 122, 103, 100)" size="30"
                    @click="clickCart"
                    style="cursor: pointer"/>
              <Modal
                v-model="modal"
                :width="750"
                @on-ok="add"
                @on-cacel="reset"
                :ok-text="type === 0 ? '加入购物车' : '立即购买'"
                cancel-text="取消"
              >
                <Row style="margin-top: 15px">
                  <Col span="5">
                    <img src="../assets/img/timg.jpg" alt="" style="width: 100px; height: 100px">
                  </Col>
                  <Col span="8">
                    <p class="class3" style="margin-top: 15px">作品名称：{{ albumData.musicName }}</p>
                    <p class="class3">版权方：{{ albumData.recordCompany }}</p>
                  </Col>
                  <Col span="8">
                    <p class="class3" style="margin-top: 15px">词作者：{{ albumData.lyricist }}</p>
                    <p class="class3">曲作者：{{ albumData.composer }}</p>
                    <p class="class3">演唱者：{{ albumData.singer }}</p>
                  </Col>
                </Row>
                <Form
                  style="margin-left: 80px"
                  label-position="right"
                  :label-width="120"
                  ref="formInfo">
                  <FormItem label="授权类型：" style="margin-bottom: 10px">
                    <Button size="small" class="mar-left-10 mar-right-10" style="width: 80px"
                            @click="type = 0"
                            :type="type === 0 ? 'primary' : 'default'"
                            v-if="albumData.type === 0 || albumData.type === 3">许可
                    </Button>
                    <Button size="small" class="mar-left-10 mar-right-10" style="width: 80px"
                            @click="type = 1"
                            :type="type === 1 ? 'primary' : 'default'"
                            v-if="albumData.type === 1 || albumData.type === 3">转让
                    </Button>
                    <Tooltip placement="right" content="以何种方式购买">
                      <Icon type="ios-help-circle"/>
                    </Tooltip>
                  </FormItem>

                  <!--                  许可-->
                  <div v-if="type === 0 && authorizeData">
                    <FormItem label="授权种类：" style="margin-bottom: 10px" :required="true">
                      <CheckboxGroup v-model="auTransaction.allowType">
                        <!--                      <Checkbox label="表演权"></Checkbox>-->
                        <!--                      <Checkbox label="放映权"></Checkbox>-->
                        <!--                      <Checkbox label="广播权"></Checkbox>-->
                        <!--                      <Checkbox label="摄制权"></Checkbox>-->
                        <!--                      <Checkbox label="改编权"></Checkbox>-->
                        <!--                      <Checkbox label="翻译权"></Checkbox>-->
                        <!--                      <Checkbox label="信息网络传播权"></Checkbox>-->
                        <Checkbox v-for="i in authorizeData.allowType" v-bind:key="i" :label="i"></Checkbox>
                        <Tooltip placement="right" content="您想购买何种全力">
                          <Icon type="ios-help-circle"/>
                        </Tooltip>
                      </CheckboxGroup>
                    </FormItem>
                    <FormItem label="分发时间：" style="margin-bottom: 10px" :required="true">
                      <!--                      <RadioGroup v-model="auTime">-->
                      <!--                        &lt;!&ndash;label是值，同时如果没有文本label的文本也当做文本&ndash;&gt;-->
                      <!--                        <Radio label="一个星期"></Radio>-->
                      <!--                        <Radio label="一个月"></Radio>-->
                      <!--                        <Radio label="一年"></Radio>-->
                      <!--                        <Radio label="无限期"></Radio>-->
                      <!--                        <Radio label="自定义"></Radio>-->
                      <!--                        <Tooltip placement="right" content="所有开始时间均默认为今天">-->
                      <!--                          <Icon type="ios-help-circle"/>-->
                      <!--                        </Tooltip>-->
                      <!--                        <Row v-if="auTime === '自定义'">-->
                      <!--                          <Col span="10">-->
                      <!--                            <DatePicker type="date" placeholder="开始时间" style="height: 20px"></DatePicker>-->
                      <!--                          </Col>-->
                      <!--                          <Col span="2" style="text-align: center; margin-top: 3px">至</Col>-->
                      <!--                          <Col span="10">-->
                      <!--                            <DatePicker type="date" placeholder="结束时间" style="height: 20px"></DatePicker>-->
                      <!--                          </Col>-->
                      <!--                        </Row>-->
                      <!--                      </RadioGroup>-->
                      <Row>
                        <Col span="10">
                          <DatePicker type="date" placeholder="开始时间" style="height: 20px"
                                      :disabled="true"
                                      size="small"
                                      format="yyyy-MM-dd"
                                      :value="auTransaction.authorizationStartTime"></DatePicker>
                        </Col>
                        <Col span="2" style="text-align: center; margin-top: 3px">至</Col>
                        <Col span="10">
                          <DatePicker type="date" placeholder="结束时间"
                                      style="height: 20px"
                                      :options="options1"
                                      format="yyyy-MM-dd"
                                      @on-change="res => {auTransaction.authorizationEndTime = res}"></DatePicker>
                        </Col>
                      </Row>
                    </FormItem>
                    <FormItem label="授权地域：" style="margin-bottom: 10px" :required="true">
                      <RadioGroup v-model="auTransaction.allowRegion">
                        <Radio v-if="authorizeData.allowRegion === 0 || authorizeData.allowRegion === 2" :label="0">国内
                        </Radio>
                        <Radio v-if="authorizeData.allowRegion === 1 || authorizeData.allowRegion === 2" :label="1">海外
                        </Radio>
                        <Radio v-if="authorizeData.allowRegion ===2" :label="2">全球</Radio>
                      </RadioGroup>
                    </FormItem>
                    <FormItem label="授权单价：" style="margin-bottom: 10px">
                      {{ authorizeData.pricePerDay }}元 /天/单项福利
                    </FormItem>
                    <FormItem label="永久授权单价：" style="margin-bottom: 10px">
                      {{ authorizeData.perpetualPrice }}元 /每项权利
                    </FormItem>
                    <FormItem label="总计：" style="margin-bottom: 10px">
                      {{ auTransaction.totalPrices }}
                    </FormItem>
                  </div>
                  <!--                  transfer-->
                  <div v-if="type === 1 && transferData">
                    <FormItem label="授权种类：" style="margin-bottom: 10px">
                      <CheckboxGroup>
                        <!--                      <Checkbox label="放映权"></Checkbox>-->
                        <!--                      <Checkbox label="摄制权"></Checkbox>-->
                        <!--                      <Checkbox label="改编权"></Checkbox>-->
                        <!--                      <Checkbox label="汇编权"></Checkbox>-->
                        <Checkbox v-for="i in transferData.allowType" v-bind:key="i" :label="i"></Checkbox>
                        <Tooltip placement="right" content="您想购买何种全力">
                          <Icon type="ios-help-circle"/>
                        </Tooltip>
                      </CheckboxGroup>
                    </FormItem>
                    <FormItem label="分发时间：" style="margin-bottom: 10px">
                      <RadioGroup>
                        <Radio label="一个星期"></Radio>
                        <Radio label="一个月"></Radio>
                        <Radio label="一年"></Radio>
                        <Radio label="无限期"></Radio>
                      </RadioGroup>
                      <Row>
                        <Col span="10">
                          <DatePicker type="date" placeholder="开始时间" style="height: 20px"></DatePicker>
                        </Col>
                        <Col span="2" style="text-align: center; margin-top: 3px">至</Col>
                        <Col span="10">
                          <DatePicker type="date" placeholder="结束时间" style="height: 20px"></DatePicker>
                        </Col>
                      </Row>
                    </FormItem>
                    <FormItem label="授权地域：" style="margin-bottom: 10px">
                      <RadioGroup>
                        <Radio v-if="transferData.allowRegion === 0 || transferData.allowRegion === 2" :label="0">国内
                        </Radio>
                        <Radio v-if="transferData.allowRegion === 1 || transferData.allowRegion === 2" :label="1">海外
                        </Radio>
                        <Radio v-if="transferData.allowRegion === 2" :label="2">全球</Radio>
                      </RadioGroup>
                    </FormItem>
                    <FormItem label="授权单价：" style="margin-bottom: 10px">
                      {{ transferData.pricePerDay }}元 /天/单项福利
                    </FormItem>
                    <FormItem label="永久授权单价：" style="margin-bottom: 10px">
                      {{ transferData.perpetualPrice }}元 /每项权利
                    </FormItem>
                    <FormItem label="总计：" style="margin-bottom: 10px">
                      {{ trTransaction.totalPrices }}
                    </FormItem>
                  </div>
                </Form>
              </Modal>
            </Col>
            <Col span="10" style="display: flex; align-items: center">
              <Icon type="md-download" color="rgba(235, 122, 103, 100)" size="30"/>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
    <div style="width: 90%; margin: 10px auto">
      <Row>
        <Col span="18" style="display: flex;">
          <div>
            <img src="../assets/img/timg.jpg" alt="" style="height: 120px; width: 120px; cursor: pointer">
          </div>
          <div style="margin-left: 10px; margin-top: 10px">
            <div>作品名称：{{ albumData.musicName }}</div>
            <div style="margin: 8px auto">创作者：{{ albumData.singer }}</div>
            <div>音乐特征：{{ character[albumData.musicId % 5] }}</div>
          </div>
        </Col>
        <Col span="6" style="height: 140px">
          <div class="class2" @click="listen" style="cursor: pointer">试听</div>
        </Col>
      </Row>
    </div>
    <Modal
      fullscreen
      v-model="modal1"
      :footer-hide="true">
      <div>
        <div style="color: rgba(16, 16, 16, 100); font-size: 28px; text-align: center; margin-top: 16%;
                  height: 35px; line-height: 35px; display: flex; justify-content: center">
          <Icon type="md-checkmark-circle-outline" color="green" size="35" style=""/>
          <div style="margin-left: 10px">音乐作品已成功加入购物车！</div>
        </div>
        <div style="height: 2px;width: 80%; margin: 10px auto;" class="items-background-color"></div>
        <div style="margin-top: 10px; justify-content: center; display: flex">
          <Button style="margin-right: 20px;"
                  class="items-background-color"
                  @click="toCart">查看购物车
          </Button>
          <Button @click="modal1 = false">返回 >></Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { intervalDays, today } from '@/common/utils'

export default {
  name: 'CardForTransaction',
  props: {
    albumData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      modal: false,
      modal1: false,
      type: null, // 记住用户选择了什么类型的授权类型
      character: ['R&B', '流行', '乡村', '蓝调', '摇滚'],
      authorizeData: null,
      transferData: null,
      // 提交信息
      auTransaction: null,
      trTransaction: null,
      // 分发时间辅助信息
      auTime: '',
      trTime: '',
      options1: {
        shortcuts: [
          {
            text: '1星期',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 7)
              return date
            }
          },
          {
            text: '1个月',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 30)
              return date
            }
          },
          {
            text: '1年',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 365)
              return date
            }
          }
        ]
      }
    }
  },
  watch: {
    authorizeData: {
      handler () {
        this.auTransaction = {
          type: this.type,
          allowType: [],
          authorizationStartTime: today(),
          authorizationEndTime: null,
          permissionId: this.authorizeData.permissionId,
          pricePerDay: this.authorizeData.pricePerDay,
          perpetualPrice: this.authorizeData.perpetualPrice,
          allowRegion: null,
          totalPrices: ''
        }
      }
    },
    transferData: {
      handler () {
        this.trTransaction = {
          type: this.type,
          allowType: [],
          authorizationStartTime: today(),
          authorizationEndTime: null,
          permissionId: this.transferData.permissionId,
          pricePerDay: this.transferData.pricePerDay,
          perpetualPrice: this.transferData.perpetualPrice,
          allowRegion: null,
          totalPrices: ''
        }
      }
    },
    'auTransaction.allowType': {
      handler () {
        if (this.auTransaction.allowType.length > 0 && this.auTransaction.authorizationEndTime !== today()) {
          const days = intervalDays(this.auTransaction.authorizationStartTime, this.auTransaction.authorizationEndTime)
          this.auTransaction.totalPrices = (this.auTransaction.allowType.length * days * this.authorizeData.pricePerDay).toString()
        }
      }
    },
    'auTransaction.authorizationEndTime': {
      handler () {
        console.log('end time changes')
        if (this.auTransaction.allowType.length > 0 && this.auTransaction.authorizationEndTime !== today()) {
          const days = intervalDays(this.auTransaction.authorizationStartTime, this.auTransaction.authorizationEndTime)
          this.auTransaction.totalPrices = (this.auTransaction.allowType.length * days * this.authorizeData.pricePerDay).toString()
        }
      }
    },
    auTransaction: {
      handler (newVal) {
        console.log(newVal)
      },
      deep: true
    }
  },
  created () {
    if (this.albumData.type === 3) {
      this.type = 0
    } else {
      this.type = this.albumData.type
    }
    // this.$get('/musicPermission/getTransTime',
    //   { musicId: this.albumData.musicId, typeList: [''] }).then(res => {
    //   console.log(res)
    // })
  },
  methods: {
    listen () {

    },
    clickCart () {
      this.modal = true
      // 还没有请求过form可选择的数据
      if (this.authorizeData === null && this.transferData === null) {
        // 许可类型
        if (this.albumData.type === 0 || this.albumData.type === 3) {
          this.$get('/musicPermission/getMusicPermissionDetail', { musicId: this.albumData.musicId }).then(res => {
            if (res.code === 20000) {
              this.authorizeData = res.data
            } else {
              this.$Message.error({
                content: res.message
              })
            }
          })
        }
        if (this.albumData.type === 1 || this.albumData.type === 3) {
          this.$get('/musicPermission/getTransferDetail', { musicId: this.albumData.musicId }).then(res => {
            if (res.code === 20000) {
              this.transferData = res.data
            } else {
              this.$Message.error({
                content: res.message
              })
            }
          })
        }
      }
    },
    add () {
      if (this.type === 0) {
        // authorization
        this.$postApplicationJson('/orderCart/addToCart', this.auTransaction).then(res => {
          if (res.code === 20000) {
            this.modal1 = true
          } else {
            this.$Notice.error({
              title: '添加购物车失败',
              desc: res.message
            })
          }
        })
      } else {
        // transfer, and then buy the music work directly
      }
    },
    reset () {
      this.modal = true
      console.log('start')
      this.$refs.formInfo.resetFields()
      // default to let modal = false
      // 点击取消的话执行了resetFields方法，会清空选择的信息然后关闭
      // 直接右上角x掉的话只是令modal = false
    },
    toCart () {
      this.$router.push('/cart')
    }
  }
}
</script>

<style scoped>
.class1 {
  width: 150px;
  height: 50px;
  line-height: 50px;
  opacity: 0.7;
  background-color: rgba(235, 122, 103, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 20px;
  text-align: center;
}

.class2 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background-color: rgba(235, 122, 103, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.class3 {
  margin-top: 5px;
}
</style>
